<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 py-8 px-4">
    <div class="max-w-4xl mx-auto">
      <!-- 标题区域 -->
      <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-800 mb-2">生活指数</h1>
        <p class="text-gray-600">为您提供全面的生活气象指导</p>
      </div>

      <!-- 指数选择卡片 -->
      <div class="bg-white rounded-2xl shadow-lg p-6 mb-8">
        <div class="grid grid-cols-2 sm:grid-cols-4 gap-6">
          <div
            v-for="item in bgimglist"
            :key="item.id"
            class="flex flex-col items-center group cursor-pointer transition-all duration-300 hover:scale-105"
            @click="active(item.type)"
          >
            <div
              class="w-16 h-16 rounded-full flex items-center justify-center transition-all duration-300 shadow-md"
              :class="[
                item.type === type 
                  ? 'bg-gradient-to-br from-blue-500 to-indigo-600 shadow-lg scale-110' 
                  : 'bg-gray-200 hover:bg-gray-300'
              ]"
              :style="`
                background-image: ${item.type === type ? 'none' : `url('/Life_imgs/city-icon.png')`};
                background-size: 438px;
                background-position: ${item.ip[0]}px ${item.ip[1]}px;
              `"
            >
              <div
                v-if="item.type === type"
                class="w-8 h-8 bg-white rounded-full flex items-center justify-center"
              >
                <div
                  class="w-6 h-6 rounded-full"
                  :style="`
                    background-image: url('/Life_imgs/city-icon.png');
                    background-size: 438px;
                    background-position: ${item.ip[0]}px ${item.ip[1]}px;
                  `"
                ></div>
              </div>
            </div>
            <span
              class="mt-3 text-sm font-medium transition-colors duration-300"
              :class="[
                item.type === type 
                  ? 'text-blue-600 font-semibold' 
                  : 'text-gray-600 group-hover:text-gray-800'
              ]"
            >
              {{ item.name }}
            </span>
          </div>
        </div>
      </div>

      <!-- 指数详情区域 -->
      <div class="bg-white rounded-2xl shadow-lg p-6">
        <div class="flex items-center mb-6">
          <div class="w-1 h-6 bg-blue-500 rounded-full mr-3"></div>
          <h2 class="text-xl font-semibold text-gray-800">
            {{ currentIndexName }} 指数详情
          </h2>
        </div>
        <Life :msgdatalist="selectedData" />
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="text-center py-8">
        <div class="inline-flex items-center">
          <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce mr-1"></div>
          <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce mr-1" style="animation-delay: 0.1s"></div>
          <div class="w-4 h-4 bg-blue-500 rounded-full animate-bounce" style="animation-delay: 0.2s"></div>
        </div>
        <p class="text-gray-600 mt-2">加载中...</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from "axios";
import { ref, computed, onMounted } from "vue";
import Life from "../components/Life.vue";

const msglist = ref([]);
const type = ref(8);
const loading = ref(true);

const selectedData = computed(() => {
  return msglist.value.filter((item) => item.type == type.value);
});

const currentIndexName = computed(() => {
  const item = bgimglist.find(item => item.type === type.value);
  return item ? item.name : '舒适度';
});

const bgimglist = [
  { id: 1, type: 8, name: "舒适度", ip: [-64, 0] },
  { id: 2, type: 2, name: "洗车", ip: [-123, 0] },
  { id: 3, type: 3, name: "穿衣", ip: [-184, 0] },
  { id: 4, type: 9, name: "感冒", ip: [-244, 0] },
  { id: 5, type: 1, name: "运动", ip: [-64, -66] },
  { id: 6, type: 6, name: "旅游", ip: [-123, -66] },
  { id: 7, type: 5, name: "紫外线", ip: [-184, -66] },
  { id: 8, type: 10, name: "空气污染", ip: [-244, -66] },
];

function active(x) {
  type.value = x;
}

const host = "https://p76yvxv44n.re.qweatherapi.com";
const token = "Bearer eyJhbGciOiJFZERTQSIsImtpZCI6Iks0NUY1R0pRTVAifQ.eyJzdWIiOiI0OVRORjZRRUpWIiwiaWF0IjoxNzU3NTcwODgyLCJleHAiOjE3NTc2NTcyODJ9.tgyV0Ric5fuBRXxJjsF-p9k9qafhmprj7L-49FibuLDxj6iWMUh4VAjYrC7UJ-kFpo8kawH-2OLa20SI1h-ICQ";

// 获取生活指数数据
onMounted(() => {
  axios
    .get(`${host}/v7/indices/3d`, {
      params: {
        type: `8,2,3,9,1,6,5,10`,
        location: `114.1,30.49`,
      },
      headers: {
        Authorization: token,
      },
    })
    .then(function (res) {
      msglist.value = res.data.daily;
      console.log("生活指数获取", msglist.value);
    })
    .catch(function (err) {
      console.error("生活指数获取失败:", err);
    })
    .finally(() => {
      loading.value = false;
    });
});
</script>